{% extends "base/base-sidebar.html" %}

{% block title %}MMO Checker{% endblock %}

{% block main %}
    <section class="pla-section-results">
        <div data-pla-messages></div>
        <div class="pla-results" data-pla-results>
            <p class="pla-results-message">Search to begin</p>
        </div>
    </section>
{% endblock %}

{% block sidebar %}
    <section class="pla-section-options">
        <div class="pla-control-actions">
            <button class="pla-button pla-button-action" id="pla-button-checkmmos">Check All MMOS</button>
        </div>

        <div class="pla-control-actions">
            <div class="pla-control">
                <label for="mapSelect">Choose an active map</label>
                <select id="mapSelect">
                </select>
            </div>
            <button class="pla-button pla-button-action" id="pla-button-checkonemap">Check Single Map</button>
        </div>

        <!--<div class="pla-control-spaced">
            <label for="inmapcheck">In Area: (Not Currently Functional)</label>
            <input type="checkbox" id="inmapcheck">
        </div>-->
        
        <div class="pla-control-actions">
            <button class="pla-button pla-button-action" id="pla-button-checkoutbreaks">Check Normal Outbreaks</button>
        </div>
    </section>

    <section>
        <div class="pla-control-spaced">
            <label for="mmoShinyFilter">Shiny or Alpha</label>
            <input type="checkbox" id="mmoShinyOrAlphaFilter">
        </div>

        <div class="pla-control-spaced">
            <label for="mmoShinyFilter">Shiny Only</label>
            <input type="checkbox" id="mmoShinyFilter">
        </div>

        <div class="pla-control-spaced">
            <label for="mmoAlphaFilter">Alpha Only</label>
            <input type="checkbox" id="mmoAlphaFilter">
        </div>
        
        <div class="pla-control-spaced">
            <label for="mmoDefaultRouteFilter">Show Default Paths Only</label>
            <input type="checkbox" id="mmoDefaultRouteFilter">
        </div>
		
		<div class="pla-control-spaced">
            <label for="mmoDefaultRouteFilter">Show Multiple Shiny Paths Only</label>
            <input type="checkbox" id="mmoMultiFilter">
        </div>
        
        <div class="pla-control">
            <label for="mmoSpeciesFilter">Species Filter:</label>
            <input type="text" id="mmoSpeciesFilter">
        </div>
    </section>

    <section class="pla-section-info">
        <h3>MMO Locations</h3>
        <ul class="pla-info-list" data-pla-info-locations>
        
        </ul>
        
        <h3>Normal Outbreaks</h3>
        <ul class="pla-info-list" data-pla-info-spawns>

        </ul>
                    
        <div class="pla-control-actions">
            <button class="pla-button pla-button-action" id="pla-button-checkmaps">Refresh Maps</button>
        </div>
    </section>
{% endblock %}

{% block templates %}
    <template data-pla-results-template>
        <div class="pla-results-item" data-pla-results-template>
            <ul class="pla-results-heading pla-results-ul">
                <li class="pla-results-sprite" data-pla-results-sprite></li>
                <li class="pla-results-species" data-pla-results-species></li>
                <li>At <span class="pla-results-mapname" data-pla-results-mapname></span></li>
            </ul>

            <ul class="pla-results-ul">
                <li><span class="pla-results-label">Shiny:</span> <span class="float -left" data-pla-results-shinysprite><span class="float -right" data-pla-results-shiny></span></span></li>
                <li><span class="pla-results-label">Alpha:</span> <span data-pla-results-alpha></span></li>
            </ul>

            <ul class="pla-results-ul">
                <li><span class="pla-results-label">Group:</span> <span data-pla-results-group></span></li>
                <li><span class="pla-results-label">Number of First Round Spawns: </span><span data-pla-results-numspawns></span></li>
            </ul>
            <ul class="pla-results-ul">
                <li><span class="pla-results-label"><span data-pla-results-location></span></span></li>
            </ul>
			<!--<button type="button" class="collapsible">See Duplicate Paths</button>
			<div class="content">-->
			<ul class="pla-results-ul">
				<li><span class="pla-results-label">Chained With: <span data-pla-info-chains></span></span></li>
			</ul>
            <ul class="pla-results-ul">
                <li><span class="pla-results-label">Duplicates:<span data-pla-results-dupes></span></span></li>
            </ul>
            <ul class="pla-results-ul">
                <li><span class="pla-results-label">Nature:</span> <span data-pla-results-nature></span></li>
                <li><span class="pla-results-label">Gender:</span> <span data-pla-results-gender></span></li>
                <li><span class="pla-results-label">Rolls:</span> <span data-pla-results-rolls></span></li>
            </ul>

            <ul class="pla-results-ul">
                <li><span class="pla-results-label">Seed:</span> <span data-pla-results-seed></span></li>
                <li><span class="pla-results-label">EC:</span> <span data-pla-results-ec></span></li>
                <li><span class="pla-results-label">PID:</span> <span data-pla-results-pid></span></li>
            </ul>

            <div class="pla-results-ivs-container">
                <span class="pla-results-label">IVs:</span>
                <ul class="pla-results-ivs">
                    <li class="pla-results-ivs-hp" data-pla-results-ivs-hp></li>
                    <li class="pla-results-ivs-att" data-pla-results-ivs-att></li>
                    <li class="pla-results-ivs-def" data-pla-results-ivs-def></li>
                    <li class="pla-results-ivs-spa" data-pla-results-ivs-spa></li>
                    <li class="pla-results-ivs-spd" data-pla-results-ivs-spd></li>
                    <li class="pla-results-ivs-spe" data-pla-results-ivs-spe></li>
                </ul>
            </div>
            
            <div class="pla-results-teleport">
            </div>
        </div>
    </template>
{% endblock %}

{% block script %}
    <script type="module" src="{{ url_for('static', filename='js/mmos.js') }}"></script>
{% endblock %}